<template>
  <div class="products-layout">
    <!-- 顶部导航 -->
    <ResponsiveNav />

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 使用面包屑组件 -->
      <Breadcrumb />

      <!-- 路由出口 - 显示具体分类页面 -->
      <router-view></router-view>
    </main>

    <!-- 底部推荐区域 -->
    <div class="bottom-wrapper">
      <div class="divider"></div>
      <ProductCarousel />
      <div class="divider"></div>
      <PersonalizedRecommendation />
    </div>

    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import ProductCarousel from '@/components/ProductCarousel.vue'
import PersonalizedRecommendation from '@/components/PersonalizedRecommendation.vue'
import Breadcrumb from './components/Breadcrumb.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

defineOptions({
  name: 'ProductsLayout'
})

// 跳转到商品详情页
const goToDetail = (productId: string) => {
  router.push(`/products/detail/${productId}`)
}
</script>

<style lang="scss" scoped>
.products-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;


  .main-content {
    flex: 1;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
  }

  .bottom-wrapper {
    width: 100%;
    background-color: #fff;
  }

  .divider {
    height: 1px;
    background-color: #ddd;
    width: 100%;
  }
}
</style> 